<script setup>
import { defineProps } from 'vue'
import config from '@/config'
import { onLoad } from '@dcloudio/uni-app'
import dayjs from 'dayjs'

   
const props = defineProps(['data'])
const baseUrl = config.baseUrl
onLoad(()=>{
	console.log(props.data);
})
</script>

<template>
  <view class="containerClass">
    <h2>审批流程</h2>
    <text>已由管理员预设不可修改审批人和删除抄送人</text>
    <uv-steps active-color="#146EFB" current="3" direction="column" dot inactive-color="#86909C">
      <uv-steps-item v-for="item in JSON.parse(props.data.approve)">
        <template v-slot:icon>
          <view
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #146EFB;
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
            "
          >
            <image
              src="@/static/icon/auditDetailStep/step-1.svg"
              style="width: 20rpx; height: 20rpx"
            ></image>
          </view>
        </template>
        <template v-slot:title>
          <text class="titleClass">{{ item.name }}</text>
        </template>
        <template v-slot:desc>
          <view class="chaosong">
            <view class="leftContainer">
              <view v-for="person in item.data.filter((person) => person)" class="list-left">
                <image style="border-radius: 8rpx;" v-if="person.avatar" :src="baseUrl + person.avatar"></image>
                <image style="border-radius: 8rpx;" v-else src="@/static/images/defaultAvatar.png"></image>
                <!--              <text>{{ person.nickName + '' + person.phonenumber }}</text>-->
                <text>{{ person.nickName }}</text>
              </view>
            </view>
            <view class="list-right">
              <view class="list-right-type">
                <div class="person">{{ item.type }}</div>
                <div class="createTime" v-if="item.name === '提交人'" style="font-size: 24rpx">
                  {{ dayjs(props.data.createTime).format('MM/DD HH:mm') }}
                </div>
                <div class="createTime" v-if="item.date && item.name !== '提交人'" style="font-size: 24rpx">
                  {{ dayjs(item.date).format('MM/DD HH:mm') }}
                </div>
              </view>
            </view>
          </view>
        </template>
      </uv-steps-item>
    </uv-steps>


  </view>
</template>
<style lang="scss" scoped>
@import '@/static/style/index.scss';

.containerClass {
  background-color: #ffffff;
  // padding: 32rpx;
  padding: 32rpx 10rpx 32rpx 32rpx;
  border-radius: 16rpx;

  h2 {
    color: #1d2129;
    font-size: 32rpx;
    font-weight: 500;
  }

  text {
    color: #86909c;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 32rpx;
  }
}

.titleClass {
  align-self: stretch;
  color: #000000;
  font-size: 26rpx;
  font-style: normal;
  font-weight: 400;

  .huoqina {
    padding: 1rpx 8rpx;
    align-items: center;
    border-radius: 4rpx;
    border: 2rpx solid #146EFB;
    width: 64rpx;
    height: 36rpx;
    color: #146EFB;
    font-size: 24rpx;
  }
}

:deep(.uv-steps-item--column) {
  .uv-steps-item__wrapper--column--dot {
    background-color: #fff;
  }
}

:deep(.uv-steps-item__content) {
  margin-left: 24rpx !important;
}

.chaosong {
  display: flex;
  //flex-wrap: wrap;
  align-items: center;
justify-content: space-between;
  .list-left {
    @include flex(center);
    padding: 8rpx 12rpx 8rpx 8rpx;
    background: #f2f3f5;
    border-radius: 12rpx;
    width: fit-content;
    height: 64rpx;
    margin-right: 16rpx;
    margin-top: 8rpx;
    margin-bottom: 8rpx;

    image {
      width: 48rpx;
      height: 48rpx;
      // border-radius: 12rpx;
    }

    text {
      display: inline-block;
      margin-left: 4rpx;
      margin-bottom: 0px !important;
    }
  }
}

.steps-list-box {
  .steps-list {
    @include flex(center, space-between);
    margin-bottom: 12rpx;

    .list-left {
      @include flex(center);
      padding: 8rpx 12rpx 8rpx 8rpx;
      background: #f2f3f5;
      border-radius: 200rpx;
      height: 64rpx;

      image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 12rpx;
      }

      text {
        display: inline-block;
        margin-left: 4rpx;
        margin-bottom: 0px !important;
      }
    }
  }
}

.leftContainer {
  // display: flex;
  // flex-grow: 1;
  // flex-wrap: wrap;
  // width: calc(80% - 200rpx);
  // width: 300rpx;
}

.list-right {
  //display: flex;
  align-items: center;
  // flex: 1;
  width: 300rpx;
  // text-align: right;
   .list-right-type{
	   display: flex;
	   align-items: center;
	   .person {
		   width: 150rpx;
	     color: #8e8e8e;
	     text-align: right;
	     font-size: 24rpx;
	     font-weight: 500;
	     margin: 0 !important;
	   }
	   .createTime{
		   color: #8e8e8e;
	   }
   }
   .list-right-type .person::after {
     content: "·";
     margin: 0 6rpx;
   }
  text {
    color: #86909c;
    text-align: right;
    font-size: 20rpx;
    font-weight: 400;
    margin: 0 !important;
  }
}
</style>
